<template>
	<div id="box">
		<div class="loginMain">
			<div class="logo_flex flex">
				<img src="/static/img/logo.png" class="u-logo" />
				<h3>{{ app.appName }} - 后台管理中心</h3>
			</div>
			<el-form id="loginForm">
				<el-form-item>
					<el-input placeholder="请输入账号" prefix-icon="el-icon-user-solid" class="input" v-model="form.username" @keyup.enter.native="login"></el-input>
				</el-form-item>
				<el-form-item>
					<el-input placeholder="密码" prefix-icon="el-icon-s-cooperation" class="input" show-password v-model="form.password" @keyup.enter.native="login"></el-input>
				</el-form-item>
				<div class="flex login_flex" style="margin-bottom: 35px">
					<el-checkbox v-model="form.save">保存密码</el-checkbox>
					<el-select v-model="form.api" placeholder="请选择" @change="fillFormWithCache">
						<el-option v-for="(item, index) in ['prod', 'dev']" :key="index" :label="item" :value="item"></el-option>
					</el-select>
				</div>
				<el-form-item>
					<el-button type="primary" class="btn" :loading="load.load" @click="login">立即登录</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
	import "../../../static/js/background.js";
	export default {
		data() {
			return {
				load: { load: false,},
				form: {
					save: true,
					username: "",
					password: "",
					api: "prod",
				},
			};
		},
		methods: {
			
			// 初始化背景
			initLogin() {
				particlesJS("box", {particles: {number: {value: 20,density: {enable: true,value_area: 800,},},color: {value: "#e5e5e5",},shape: {type: "circle",stroke: {width: 0,color: "#000",},polygon: {nb_sides: 5,},},opacity: {value: 0.5,random: false,anim: {enable: false,speed: 1,opacity_min: 0.1,sync: false,},},size: {value: 15,random: true,anim: {enable: false,speed: 5,size_min: 0.1,sync: false,},},line_linked: {enable: true,distance: 150,color: "#ddd",opacity: 0.4,width: 1,},move: {enable: true,speed: 2,direction: "none",random: false,straight: false,out_mode: "out",attract: {enable: false,rotateX: 600,rotateY: 1200,},},},
				interactivity: {detect_on: "canvas",events: {onhover: {enable: false,mode: "repulse",},onclick: {enable: true,mode: "push",},resize: true,},modes: {grab: {distance: 400,line_linked: {opacity: 1,},},bubble: {distance: 400,size: 40,duration: 2,opacity: 8,speed: 3,},repulse: {distance: 200,},push: {particles_nb: 4,},remove: {particles_nb: 2,},},},retina_detect: true,config_demo: {hide_card: false,background_color: "#b61924",background_image: "",background_position: "50% 50%",background_repeat: "no-repeat",background_size: "cover",},});
			},
			
			// 登录
			login() {
				let _this = this;
				if (_this.form.username && _this.form.password) {
					if (_this.form.save) {
						//保存登录账号密码
						_this.app.setUserPass(_this.form);
					} else {
						let form = JSON.parse(JSON.stringify(_this.form));
						form.username = "";
						form.password = "";
						_this.app.setUserPass(form);
					}
			
					let payload = {
						password: _this.form.password,
						username: _this.form.username,
					};
					_this.loginPost(payload);
				} else {
					_this.$notify({title: "提示",message: "请输入账号密码",type: "warning",});
				}
			},
	
			// 用缓存填充表单
			fillFormWithCache(e) {
				if (e) {
					this.form.api = e;
					return;
				}
		
				for (const key in this.app.getUserPass()) {
					this.form[key] = this.app.getUserPass()[key];
				}
			},
	
			// 登录请求
			loginPost(payload) {
				let _this = this;
				_this.app.ajax({
					url: "/admin/login/pass",
					method: "POST",
					load: _this.load,
					data: payload,
					success(res) {
						_this.app.setUserInfo(res.data.user);
						location = `/index/index`;
					},
				});
			},
			
		},
		mounted() {
			this.fillFormWithCache(); // 用缓存填充表单
			if (this.app.isLogin()) {
				location = `/index/index`;
			} else {
				this.initLogin();
			}
		},
		destroyed() {
			(window.pJSDom || []).find((item) => item.pJS.uuid === "99999").pJS.fn.vendors.destroypJS();
		},
	};
</script>

<style lang="scss" scoped>
	#box {
		height: 100vh;
		width: 100%;
		overflow-x: auto;
		padding: 130px 0;
		background: #f9f9f9;
		.loginMain {
			position: relative;
			padding: 60px 60px;
			border-radius: 50px;
			width: 570px;
			margin: 0 auto;
			z-index: 1;
			.input {
				background: #f9f9f9;
			}
			.logo_flex {
				margin-bottom: 40px;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				img {
					height: 30px;
					border-radius: 50%;
					width: 30px;
				}
				h3 {
					text-align: center;
					line-height: 30px;
					font-weight: bold;
					font-size: 20px;
					margin-left: 12px;
				}
			}
			#loginForm {
				padding: 0 10px;
			}
			.login_flex {
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				/deep/ .el-input__inner {
					line-height: 34px;
					height: 34px;
					width: 100px;
				}
				/deep/ .el-input__icon {
					line-height: 34px;
				}
			}
			.btn {
				height: 47px;
				width: 100%;
				font-size: 15px;
				border: 0;
			}
		}
	}
</style>